<html>
    <head>
    	<meta charset="utf-8">
    	<title>循环单击</title>
    	<style type="text/css">
	    	#box{width: 600px;border:1px solid #f65;margin: 0 auto;margin-top: 10px; height: 400px;}
	    	
	    	#sbox{width: 100px;height:100px;background-color: #666;}
    	</style>
	</head>
	<body>
		<div id="box">
			<input type="button" value="变宽">
			<input type="button" value="变高">
			<input type="button" value="变色">
			<input type="button" value="隐藏">
			<input type="button" value="重置">
			<div id="sbox">
			</div>
		</div>
	</body>
	<script type="text/javascript">
	    var changestyle=function  (elem,attr,val) {
	    	elem.style[attr]=val;
	    }

	    window.onload=function () {
	    	var oinput=document.getElementsByTagName('input');
	    	var odiv=document.getElementById('sbox');
	    	var attr=["width","height","backgroundColor","display","display"];
	    	var val=["300px","300px","#f65","none","block"];
	    	for(var i=0;i<oinput.length;i++){
	    		oinput[i].index=i;
	    		oinput[i].onclick=function () {
	    			if(this.index==oinput.length-1){
	    				odiv.style.cssText="";
	    			}
	    			changestyle(odiv,attr[this.index],val[this.index]);
	    		}
	    	};
	    }
	</script>
</html>